<template>
    <div class="doc_detail" v-if="data">
        <div ref="table-wrap">
            <h3 style="margin:5px 0;text-align:center">文件传阅单</h3>
            <table cellpadding="0" cellspacing="0" border="0" width="100%" class="ourtable">
                <tr>
                    <td rowspan="2">来文机关</td>
                    <td rowspan="2">{{data.civil_service.zh || data.civil_service.mn}}</td>
                    <td>收文时间</td>
                    <td colspan="2">{{ data.receipt_time }}</td>
                </tr>
                <tr>
                    <td>登记文号</td>
                    <td colspan="2">{{ data.document_code }}</td>
                </tr>
                <tr>
                    <td>来文字号</td>
                    <td>{{ data.letter_number.zh || data.letter_number.mn }}</td>
                    <td>等级</td>
                    <td colspan="2">{{ data.grade.zh || data.grade.mn }}</td>
                </tr>
                <tr>
                    <td>文件题目</td>
                    <td colspan="4">{{ data.title.zh }}</td>
                </tr>
                <tr>
                    <td>拟办意见</td>
                    <td colspan="4" v-html="data.options.zh"></td>
                </tr>
                <tr v-if="data.pishi.length >0">
                    <td>领导批示</td>
                    <td colspan="4">
                        <p v-for="item in data.pishi" :key="item.id" style="display:flex;padding-left:7px">
                            <span>{{item.teacher.teacher_name.zh?item.teacher.teacher_name.zh:item.teacher.teacher_name.mn}}： </span>
                            <span v-html="item.approval.zh"></span>
                        </p>
                    </td>
                </tr>
                <tr v-if="data.school_leader.length >0">
                    <td :rowspan="data.school_leader.length+1">校级领导签收</td>
                    <td class="w">姓名</td>
                    <td class="w">阅文时间</td>
                    <td class="w">姓名</td>
                    <td class="w">阅文时间</td>
                </tr>
                <tr v-if="data.school_leader.length >0" v-for="(item,ind) in data.school_leader" :key="ind">
                    <td class="w" v-if="item[0].teacher">{{item[0].teacher.teacher_name.zh}}</td>
                    <td class="w">{{item[0].is_look?item[0].updated_at:'未阅读'}}</td>
                    <td class="w">{{item[1]?(item[1].teacher.teacher_name.zh):''}}</td>
                    <td class="w">{{item[1]?(item[1].is_look?item[1].updated_at:'未阅读'):''}}</td>
                </tr>
                <tr v-if="!data.other_leader.length">
                    <td>科室领导签收</td>
                    <td class="w"></td>
                    <td class="w"></td>
                    <td class="w"></td>
                    <td class="w"></td>
                </tr>
                <tr v-if="data.other_leader.length">
                    <td :rowspan="data.other_leader.length">科室领导签收</td>
                    <td class="w">{{data.other_leader[0][0].teacher.teacher_name.zh}}</td>
                    <td class="w">{{data.other_leader[0][0].is_look?data.other_leader[0][0].updated_at:'未阅读'}}</td>
                    <td class="w">{{data.other_leader[0][1]?(data.other_leader[0][1].teacher.teacher_name.zh):''}}</td>
                    <td class="w">{{data.other_leader[0][1]?(data.other_leader[0][1].is_look?data.other_leader[0][1].updated_at:'未阅读'):''}}</td>
                </tr>
                <tr v-if="data.other_leader.length>1" v-for="(item,ind) in data.other_leader.slice(1)" :key="ind">
                    <td class="w">{{item[0].teacher.teacher_name.zh}}</td>
                    <td class="w">{{item[0].is_look?item[0].updated_at:'未阅读'}}</td>
                    <td class="w">{{item[1]?item[1].teacher.teacher_name.zh:''}}</td>
                    <td class="w">{{item[1]?(item[1].is_look?item[1].updated_at:'未阅读'):''}}</td>
                </tr>
                <tr>
                    <td>备注</td>
                    <td colspan="4">
                        <p v-for="item in data.teacher" :key="item.id" style="display:flex;padding-left:7px">
                            <span>{{item.teacher.teacher_name.zh?item.teacher.teacher_name.zh:item.teacher.teacher_name.mn}}： </span>
                            <span v-html="item.content"></span>
                        </p>
                    </td>
                </tr>
            </table>
        </div>
        <div class="examine">
            <p class="tt">下发的教师：</p>
            <p v-for="(tc,i) in data.to_teacher" :key="i"> &nbsp;&nbsp; {{tc.teacher.teacher_name.zh}}： &nbsp;&nbsp; {{tc.is_look?'已查看':'未查看'}}</p>
        </div>
        <div class="examine">
            我的意见：&nbsp; &nbsp; {{data.my_option?data.my_option.approval?data.my_option.approval.zh?data.my_option.approval.zh:'暂无意见':'暂无意见':'暂无意见'}}
        </div>
        <div class="examine">
            上级意见：&nbsp; &nbsp; {{data.leader_option?data.leader_option.content?data.leader_option.content.zh?data.leader_option.content.zh:'暂无意见':'暂无意见':'暂无意见'}}
        </div>
        <div class="examine">附件：&nbsp;&nbsp; 
            <p v-for="itm in data.file" :key="itm.id" style="padding-left:20px">
                <a :href="itm.content" target="_blank" :download="itm.file_name">{{itm.file_name}}</a>
            </p>
            <span v-if="data.file.length==0">无</span>
        </div>
        <div v-for="item in data.examine" :key="item.id">
            <!-- <div class="examine">审核人：&nbsp;&nbsp;{{item.examine.teacher_name}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;审核状态：&nbsp;&nbsp;<span v-html="getstatus(item.status)"></span>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;审核时间：&nbsp;&nbsp;{{item.status==0?'':item.updated_at}}
            </div> -->
        </div>
        <div class="reseve" v-if='lookdetails'>
            <p>接收人查阅情况：</p>
            <Table :columns="columns1" :data="data.to_teacher"></Table>
        </div>
    </div>
</template>

<script>

export default {
    props:{
        id:Number,
        lookdetails:Boolean,
    },
    data () {
        return {
            data: null,
            columns1:[
                {
                    title: '教师',
                    render: (h,params)=> {
                        return h('span',params.row.teacher.teacher_name.zh)
                    }
                },
                {
                    title: '是否查看',
                    render: (h,params)=> {
                        switch(params.row.is_look) {
                            case 0: return h('span',{
                                style: {color: '#ed3f14'}
                            },'未查看');
                            case 1: return h('span',{
                                style: {color: '#19be6b'}
                            },'已查看');
                        }
                    }
                },
                {
                    title:'查看时间',
                    render:(h,params)=>{
                        return h('span',params.row.is_look==1?params.row.updated_at:'')
                    }
                }
            ],
        }
    },
    methods: {
        load() {
            this.$http.get('api/document/v1/document/getone/'+this.id).then(res=> {
                this.data = res.data
            }).catch(err=> console.log(err))
        },
        getstatus(status) {
            switch(status) {
                case 0: return '<span style="color:#ff9900">未审核</span>'
                case 1: return '<span style="color:#19be6b">通过审核</span>'
                case 2: return '<span style="color:#ed3f14">未通过审核</span>'
                case 3: return '<span style="color:#007d7f">待上级处理</span>'
            }
        }
    },
    created(){
        this.load()
    }
} 
</script>


<style lang="less" scoped>
.doc_detail {
    .title {
        text-align: center;
        margin: 8px 0 4px 0;
    }
    .sub_title {
        text-align: right;
        padding-bottom: 7px;
        border-bottom: 1px solid #ddd;
    }
    .content {
        padding: 7px 0;
        border-bottom: 1px solid #ddd;
    }
    .examine {
        font-size: 14px;
        font-weight: 400;
        border: 1px solid #ddd;
        padding: 7px 11px;
        margin-top: 12px;
        background: #f5f5f5;
    }
    .reseve {
        border-top: 1px solid #ddd;
        margin-top: 12px;
        p {
            font-size: 13px;
            padding: 8px 0 4px 0;
            font-weight: 500;
        }
    }
    .ourtable {
        border-top: 1px solid #666;
        border-left: 1px solid #666;
        tr {
            text-align: center;
            td {
                border-bottom: 1px solid #666;
                border-right: 1px solid #666;
                padding: 8px 5px;
                &.w {
                    width: 21%;
                    height: 40px;
                }
            }
        }
    }
}
</style>